<!DOCTYPE html>
<#assign base=springMacroRequestContext.getContextUrl("")>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/icon.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/layui.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/jquery.contextMenu.css">
    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/map/css/Map_CH.css">

    <link rel="stylesheet" type="text/css" href="${base}/glrStatic/easyui/themes/metrole/easyui.css">

    <script type="text/javascript" src="${base}/glrStatic/viewOutline/jquery.1.10.2.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/viewOutline/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/viewOutline/ajax.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/tools/curdtools.js?a=1112"></script>
    <script type="text/javascript" src="${base}/glrStatic/lhgdialog-4.2.0/lhgdialog.min.js"></script>
    <script type="text/javascript" src="${base}/glrStatic/layer/layer.js"></script>
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        table.imagetable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #999999;
            border-collapse: collapse;
            width: 100%;
        }
        table.imagetable th {
            background:#b5cfd2;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
            width: 30%;
        }
        table.imagetable td {
            background:#dcddc0;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }
        .button_light {
            background-color: #008CBA;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor:pointer;
        }

        .button_remove {
            background-color: #AAAAAA;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor:pointer;
        }



        .BMap_cpyCtrl{display:none !important;}
        .anchorBL a img{display:none !important;}

        /*地图标题 infoWindow*/
        .BMap_bubble_title{
            color:#fff;
            font-size:14px;
            font-weight: bold;
            text-align:left;
            background:transparent !important;
        }

        .BMap_pop .BMap_top{
            background:rgba(0, 125, 196,.8) !important;
            border:0 !important;
        }
        .BMap_pop .BMap_center{
            border:0 !important;
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop .BMap_bottom{
            border:0 !important;
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop div:nth-child(3){
            background:transparent !important;
        }
        .BMap_pop div:nth-child(3) div{
            border-radius:7px;
            background:rgba(0, 125, 196,.8) !important;
            border:0 !important;
        }
        .BMap_pop div:nth-child(1){
            border-radius:7px 0 0 0;
            background:transparent !important;
            border:0 !important;
        }
        .BMap_pop div:nth-child(1) div{
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop div:nth-child(5){
            border-radius:0 0 0 7px;
            background:transparent !important;
            border:0 !important;
        }
        .BMap_pop div:nth-child(5) div{
            border-radius:7px;
            background:rgba(0, 125, 196,.8) !important;
        }
        .BMap_pop div:nth-child(7){
            background:transparent !important;
            left: 226px;
        }
        .BMap_pop div:nth-child(7) div{
            border-radius:7px;
            background:rgba(0, 125, 196,.8) !important;
        }
        /*替换关闭按钮*/
        img[src="http://api0.map.bdimg.com/images/iw_close1d3.gif"]{
            content: url('${base}/glrStatic/images/close.png');
        }
        img[src="https://api.map.baidu.com/images/iw_close1d3.gif"]{
            content: url('${base}/glrStatic/images/close.png');
        }
        /*替换剪头*/
        img[src="http://api0.map.bdimg.com/images/iw3.png"]{
            opacity:.7;
            margin-top: -692px !important;
            filter:alpha(opacity=70);
            content: url('${base}/glrStatic/home/images/iw3.png');
        }
        img[src="https://api.map.baidu.com/images/iw3.png"]{
            opacity:.7;
            margin-top: -692px !important;
            filter:alpha(opacity=70);
            content: url('${base}/glrStatic/home/images/iw3.png');
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=A982fc9194e26e983ef0dd40499e87e6"></script>
    <title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
<div id="findSheBei" style="background: rgba(255, 255, 255, 0); z-index: 0; position:absolute; right: 0px; top: 0px;">
    <div class="searchEquips">
        <div class="findSheBei1 findSheBeis" style="width: 280px;">
            <div class="imgShebeiLittle" style="background:url(${base}/glrStatic/map/css/eqp2.png) center center no-repeat;"></div>
            <div class="SheMess" style="width: 30px;">网关</div>
            <select onchange="addLightMapOverlay()" id="gate_id" style="float: left;width: 160px;margin-left: 31px;height:30px;line-height: 15px;font-size: 12px;border-radius:3px;">
            </select>
        </div>


        <!--

      <div class="findSheBei2 findSheBeis">
        <div class="imgShebeiLittle" style="background:url(plug-in/map/css/maplight.jpg) center center no-repeat;"></div>
        <div class="SheMess">灯具</div>
      </div>
      <div class="findSheBei3 findSheBeis" style="width: 160px;">
        <div class="imgShebeiLittle" style="background:url(plug-in/map/css/mapGroup.png) center center no-repeat;"></div>
        <div class="SheMess">分组</div>
        <select id="group" style="float: left;width: 80px;margin-left: 11px;height:25px;border-radius:3px;">
            <option value="">全部</option>
        </select>
       </div>
        <div class="findSheBei5 findSheBeis">
          <div class="imgShebeiLittle" style="background:url(plug-in/map/css/mapLamppost.png) center center no-repeat;"></div>
          <div class="SheMess">灯杆</div>
        </div>
        -->
        <div class="findSheBei6 findSheBeis" style="width:80px;"  onclick="biaoshi()" >
            <i class="layui-icon" style="font-weight:600;color:#ff8100"></i>&nbsp;状态标识
        </div>
    </div>


    <div class="infomations" style="display: none;" id="biaoshi">
        <div class="infoTitle">
            <div class="titleWord">状态</div>
            <div class="titleWord">标识</div>
        </div>
        <div class="infoContent">
            <div class="infoTr">
                <div class="infoStatus">开</div>
                <div class="infoLine" style="color:#F4D725;">- - - - - - - - - -</div>
                <div class="infoIcon">
                    <img src="${base}/glrStatic/map/css/lIconsmaller.png" class="statusIcon">
                </div>
            </div>
            <!--  <div class="infoTr">
               <div class="infoStatus">在线 : 关</div>
               <div class="infoLine" style="color:#46ab4c;">- - - - - - - - - -</div>
               <div class="infoIcon">
               <img src="plug-in/map/css/lIconoffsmaller.png" class="statusIcon"></div>
             </div> -->
            <div class="infoTr">
                <div class="infoStatus" >关: </div>
                <div class="infoLine" style="color:#636363;">- - - - - - - - - -</div>
                <div class="infoIcon"><img src="${base}/glrStatic/map/css/lIcon_offsmaller.png" class="statusIcon"></div>
            </div>
            <div class="infoTr">
                <div class="infoStatus">告警: </div>
                <div class="infoLine" style="color:#F65F23;">- - - - - - - - - -</div>
                <div class="infoIcon"><img src="${base}/glrStatic/map/css/lIcon_alarm.png" class="statusIcon"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var XAccessToken='${AccessToken}';
    var map ;
    $(document).ready(function(){
        // 百度地图API功能
        map= new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point('117.172824','34.232286'), 14);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        //设置地图类型

        map.setMapType(BMAP_NORMAL_MAP);

        $.ajax({
            url: 'styleJson?X-Access-Token='+XAccessToken,
            success: function(res) {
                var styleJson=res.obj;
                var strToJsonData = JSON.parse(styleJson);
                map.setMapStyleV2({styleJson:strToJsonData});
            }
        });

        setMapEvent();
        addMapControl();
        //addGateWayMapOverlay();
        getGateWayList();
    });

    //
    function getGateWayList(){
        $.ajax({
            url:'getGateWayList?X-Access-Token='+XAccessToken,
            async:false,
            success:function(data){
                var userType='1';
                var markers=new Array();
                var ids=new Array();
                var sContent = "";

                var imarkers=0;

                var gate_id = $("#gate_id");
                gate_id.append("<option value='-1,117.177975,34.161128'>请选择</option>");
                $.each(data.obj,function(index,item){
                    var gatewayCode="";
                    if (typeof(item.gatewayCode) != "undefined"){
                        gatewayCode=item.gatewayCode;
                    }
                    var longitude="117.177975";
                    if (typeof(item.longitude) != "undefined"){
                        longitude=item.longitude;
                    }
                    var latitude="34.161128";
                    if (typeof(item.latitude) != "undefined"){
                        latitude=item.latitude;
                    }
                    var gatewayName="";
                    if (typeof(item.gatewayName) != "undefined"){
                        gatewayName=item.gatewayName;
                    }
                    var id="";
                    if (typeof(item.id) != "undefined"){
                        id=item.id;
                    }
                    var lightNum="";
                    if (typeof(item.lightNum) != "undefined"){
                        lightNum=item.lightNum;
                    }
                    var  st1="<option value='"+gatewayCode+","+longitude+","+latitude+"'>"+gatewayName+"</option>";
                    gate_id.append(st1);

                    gatewayArr.push(gatewayCode);
                    sContent="<table class='imagetable'><tbody>"
                            +"<tr><th style='text-align:center'>网关编号</th><td>"+gatewayCode+"</td></tr>"
                            +"<tr><th style='text-align:center'>网关名称</th><td>"+gatewayName+"</td></tr>"
                            +"<tr><th style='text-align:center'>路灯数量</th><td>"+lightNum+"</td></tr>";
                    if(userType!='2'){
                        sContent=sContent+"<tr><th style='text-align:center'>设置亮度</th><td id='td_bright_"+id+"'><input type='number' min='0' id='brightSetId"+gatewayCode+"' max='100' step='1'/></td></tr>"
                                +"<tr><th style='text-align:center'></th><td style='text-align:left'><input type='button' class='button_light' id='btn_"+gatewayCode+"' onclick='gataTempPatternSetting(\""+gatewayCode+"\")' value='设置'></button><span id='span_"+gatewayCode+"''></span></td>   </tr>";
                    }
                    sContent=sContent+"</tbody></table>";

                    markers[imarkers]={content:sContent,title:gatewayName,imageOffset: {width:-46,height:-21},position:{lat:latitude,lng:longitude}};
                    ids[imarkers]=id;
                    var point = new BMap.Point(longitude,latitude);
                    var marker = null;

                    var currentWorkStatus=item.currentWorkStatus;
                    var stico="${base}/glrStatic/map/css/lIconsmaller.png";
                    if (currentWorkStatus=='Y'){
                        stico="${base}/glrStatic/map/css/lIconsmaller.png";
                    }else{
                        stico="${base}/glrStatic/map/css/lIcon_offsmaller.png";
                    }

                    marker=new BMap.Marker(point,{icon:new BMap.Icon(stico,new BMap.Size(25,30))});

                    var label = new BMap.Label(gatewayName,{offset: new BMap.Size(25,5)});
                    var opts = {
                        width: 350,
                        title: gatewayName,
                        enableMessage: false
                    };
                    var infoWindow = new BMap.InfoWindow(sContent,opts);
                    marker.setLabel(label);
                    addClickHandler(marker,infoWindow);
                    map.addOverlay(marker);

                    imarkers=imarkers+1;

                });


            }
        });
    }


    //添加地图事件
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom();
        //  map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP,BMAP_SATELLITE_MAP ]}));
    }
    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
    }


    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    var gatewayArr=new Array();
    //添加路灯覆盖物
    function addLightMapOverlay(){
        var gate_id=$("#gate_id").val();
        var datastr=gate_id.split(",");
        var gateWayCode=datastr[0];
        var new_point = new BMap.Point(datastr[1],datastr[2]);
        map.panTo(new_point);
        var markers=new Array();
        var userType='1';
        var lightstatus=new Array();
        var sContent = "";
        if(gatewayArr.indexOf(gateWayCode)!=-1){//如果不在存加载，存载不在去加载
            $.ajax({
                url:'lightByGateWayCode?X-Access-Token='+XAccessToken,
                data:{gateWayCode:gateWayCode},
                success:function(data){
                    gatewayArr.push(gateWayCode);
                    //var light=$.parseJSON(data);
                    var light=data.obj;
                    console.info(light);
                    for(var i=0;i<light.length;i++)
                    {
                        sContent="<table class='imagetable'><tbody>"
                                +"<tr><th style='text-align:center'>路灯编号</th><td>"+light[i].ligCode+"</td></tr>"
                                +"<tr><th style='text-align:center'>路灯种类</th><td>"+light[i].ligspeName+"</td></tr>"
                                +"<tr><th style='text-align:center'>所属路段</th><td>"+light[i].gateWayCode+"</td></tr>"
                                +"<tr><th style='text-align:center'>电压(V)</th><td>"+light[i].currentVol+"</td></tr>"
                                +"<tr><th style='text-align:center'>电流(mA)</th><td>"+light[i].currentCur+"</td></tr>"
                                +"<tr><th style='text-align:center'>当前亮度(%)</th><td>"+light[i].currentBrightness+"</td></tr>";
                        sContent=sContent+"<tr><th style='text-align:center'>设置亮度</th><td><input type='number' id='brightSetId"+light[i].id+"' min='0' max='100' step='1'/></td></tr>"
                                +"<tr><th style='text-align:center'></th><td style='text-align:left'><input class='button_light' type='button' id='btn_light_"+light[i].id+"_"+gateWayCode+"' onclick='lightPatternSetting(\""+light[i].id+"\",\""+gateWayCode+"\",\""+light[i].ligCode+"\")' value='设置'></button><span id='span_light_"+light[i].id+"_"+gateWayCode+"'></span></td></tr>";
                        sContent=sContent+"</tbody></table>";
                        markers[i]={content:sContent,title:light[i].ligCode,imageOffset: {width:0,height:3},position:{lat:light[i].latitude,lng:light[i].longitude}};
                        lightstatus[i]=light[i].currentStatus;
                        //${base}/glrStatic/images/cutPic.png
                        var lightimg='${base}/glrStatic/images/deng_gray.png';
                        if(lightstatus[i]=='N'){
                            lightimg='${base}/glrStatic/images/deng_gray.png';
                        }else if(lightstatus[i]=='Y'){
                            lightimg='${base}/glrStatic/images/deng_work.png';
                        }else if(lightstatus[i]=='K'){
                            lightimg='${base}/glrStatic/images/deng_red.png';
                        }
                        var point = new BMap.Point(markers[i].position.lng,markers[i].position.lat);
                        var marker = new BMap.Marker(point,{icon:new BMap.Icon(lightimg,new BMap.Size(20,25),{
                                imageOffset: new BMap.Size(markers[i].imageOffset.width,markers[i].imageOffset.height)
                            })});
                        var label = new BMap.Label(markers[i].title,{offset: new BMap.Size(25,5)});
                        var opts = {
                            width: 350,
                            title: markers[i].title,
                            enableMessage: false
                        };
                        var infoWindow = new BMap.InfoWindow(markers[i].content,opts);
                        marker.setLabel(label);
                        addClickHandler(marker,infoWindow);
                        map.addOverlay(marker);
                    }
                }
            });
        }
    }

    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }

    //路灯亮度设置
    var c=0;
    var t;
    var msg;
    function lightPatternSetting(lightId,gatewayCode,lightCode){
        c=10;
        var brightValue = $("#brightSetId"+lightId).val();
        if(brightValue!=null&&brightValue.trim()!=""){
            if(brightValue<0||brightValue>100){
                tip('请输入整数'+'(0~100)');
                return;
            }
            msg=layer.msg('加载中...');

            var requestBody = {
                gatewayCode : gatewayCode,
                brightValue : brightValue,
                lightId:lightId,
                lightCode:lightCode
            };
            ajax.postRequest(requestBody, "gatawaySetBrightness?X-Access-Token="+XAccessToken, function(message) {
                debugger
                layer.close(msg);
                layer.msg(message.message);
            }, function(message) {
                debugger
                layer.close(msg);
                layer.msg(message.message);
            });

        }else{
            layer.msg('设置亮度值需要设置!');
        }
    }
    function biaoshi(){
        if($("#biaoshi").css("display")=='none'){//如果show是隐藏的
            $("#biaoshi").css("display","block");//show的display属性设置为block（显示）
        }else{//如果show是显示的
            $("#biaoshi").css("display","none");//show的display属性设置为none（隐藏）
        }
    }
    //路段亮度设置
    function gataTempPatternSetting(gatewayCode){
        c=10;
        var brightValue = $("#brightSetId"+gatewayCode).val();
        if(brightValue!=null&&brightValue.trim()!=""){
            if(brightValue<0||brightValue>100){
                tip('请输入整数'+'(0~100)');
                return;
            }
            msg=layer.msg('加载中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: '50%', time:100000});

            var requestBody = {
                gatewayCode : gatewayCode,
                brightValue : brightValue
            };
            ajax.postRequest(requestBody, "gatawaySetBrightness?X-Access-Token="+XAccessToken, function(message) {
                debugger
                layer.close(msg);
                layer.msg(message.message);
            }, function(message) {
                debugger
                layer.close(msg);
                layer.msg(message.message);
            });
        }else{
            layer.msg('设置亮度值需要设置!');
        }

    }
    function getMsg(gatewayCode,command)
    {
        debugger;
        if(true){
            clearTimeout(t);
            layer.close(msg);
            layer.msg('操作成功');
            return;
        }
        if(c>0){
            var requestBody = {
                gatewayCode : gatewayCode,
                command : command
            };

            ajax.postRequest(requestBody, "getMsg?X-Access-Token="+XAccessToken, function(message) {
                debugger
                //var json = $.parseJSON(data);
                if(message.success){
                    clearTimeout(t);
                    layer.close(msg);
                    if(command=='GET_LED_MSG_ON_OFF'){
                        layer.msg('操作成功');
                    }
                }else{
                    t=setTimeout("getMsg('"+gatewayCode+"','"+command+"')",2000);
                }
            }, function(message) {
            });

        }else{
            layer.close(msg);
            layer.msg('获取失败');
            clearTimeout(t);
        }
        c=c-2;

    }

    //路段模式按钮点击弹出框
    function roadPatternButtonClick(id,gatewayCode,gatewayName){
        //createwindow('模式列表-网关'+gatewayName,'tBRoadController.do?gisroadPatternList&roadId='+id,null,null);
        openwindow('模式列表-网关'+'&nbsp;'+gatewayName,"gatawayPatternList?gatewayType=selectWin&X-Access-Token="+XAccessToken+"&gatewayCode=" + gatewayCode,null,null);
    }

    function lightPatternButtonClick(lightId,lightCode){
        openwindow('模式列表-路灯',"gatawayPatternList?gatewayType=selectWin&X-Access-Token="+XAccessToken+"&lightId=" + lightId+"&lightCode="+lightCode,null,null);
    }
</script>